<template>
  <div class="flinksql-model">




    <m-list-box>
      <div slot="text">个性化-flinksql配置</div>
      <div slot="content">
        <div class="form-mirror">
          <textarea
            id="code-sql-mirror"
            name="code-sql-mirror"
            style="opacity: 0;">
          </textarea>
        </div>
      </div>
    </m-list-box>

  </div>
</template>
<script>
    import _ from 'lodash'
    import i18n from '@/module/i18n'
    import mListBox from './_source/listBox'
    import mScriptBox from './_source/scriptBox'
    import mDatasource from './_source/datasource'
    import mLocalParams from './_source/localParams'
    import mStatementList from './_source/statementList'
    import disabledState from '@/module/mixin/disabledState'
    import mSelectInput from '../_source/selectInput'
    import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'

    let editor
    let sqlEditor
    export default {
        name: 'flinksql',

        data () {
            return {
                // Data source type
                dsType: '',
                // data source
                datasource: '',
                // Data source type
                dtType: '',
                // data source
                datatarget: '',
                // Return to the selected data source
                rtDatasource: '',
                // Return to the selected data target
                rtDatatarget: '',
                // Sql statement
                sql: '',
                // target table
                targetTable: '',
                // Pre statements
                preStatements: [],
                // Post statements
                postStatements: [],
                // speed byte
                jobSpeedByte: 0,
                // speed record
                jobSpeedRecord: 1000,
                // Custom parameter
                localParams: [],
                customConfig: 0,
                // jvm memory xms
                xms: 1,
                // jvm memory xms
                xmx: 1,
                scriptBoxDialog: false,
                item: ''
            }
        },
        mixins: [disabledState],
        props: {
            backfillItem: Object,
            createNodeId: Number
        },
        methods: {
            setEditorVal () {
                this.item = editor.getValue()
                this.scriptBoxDialog = true
            },
            getSriptBoxValue (val) {
                sqlEditor.setValue(val)
            },
            /**
             * return data source
             */
            _onDsData (o) {
                this.dsType = o.type
                this.rtDatasource = o.datasource
            },
            /**
             * return data target
             */
            _onDtData (o) {
                this.dtType = o.type
                this.rtDatatarget = o.datasource
            },
            /**
             * return pre statements
             */
            _onPreStatements (a) {
                this.preStatements = a
            },
            /**
             * return post statements
             */
            _onPostStatements (a) {
                this.postStatements = a
            },
            /**
             * return localParams
             */
            _onLocalParams (a) {
                this.localParams = a
            },
            /**
             * verification
             */
            _verification () {
                if (this.customConfig) {
                    if (!sqlEditor.getValue()) {
                        this.$message.warning(`${i18n.$t('Please enter a sql Statement(required)')}`)
                        return false
                    }



                    // storage
                    this.$emit('on-params', {
                        sql: sqlEditor.getValue(),
                        localParams: this.localParams,
                        xms: +this.xms,
                        xmx: +this.xmx
                    })
                    return true
                } else {
                    if (!sqlEditor.getValue()) {
                        this.$message.warning(`${i18n.$t('Please enter a SQL Statement(required)')}`)
                        return false
                    }


                    // storage
                    this.$emit('on-params', {
                        dtType: this.dtType,
                        dataTarget: this.rtDatatarget,
                        sql: sqlEditor.getValue(),
                        targetTable: this.targetTable,
                        jobSpeedByte: this.jobSpeedByte * 1024,
                        jobSpeedRecord: this.jobSpeedRecord,
                        preStatements: this.preStatements,
                        postStatements: this.postStatements,
                        xms: +this.xms,
                        xmx: +this.xmx
                    })
                    return true
                }
            },
            /**
             * Processing code highlighting
             */
            _handlerEditor () {
                this._destroyEditor()

                // editor
                editor = codemirror('code-sql-mirror', {
                    mode: 'sql',
                    readOnly: this.isDetails
                })

                this.keypress = () => {
                    if (!sqlEditor.getOption('readOnly')) {
                        sqlEditor.showHint({
                            completeSingle: false
                        })
                    }
                }

                // Monitor keyboard
                sqlEditor.on('keypress', this.keypress)

                sqlEditor.on('changes', () => {
                    this._cacheParams()
                })

                sqlEditor.setValue(this.sql)

                return editor
            },
            _handlersqlEditor () {
                this._destroysqlEditor()

                // sqlEditor
                sqlEditor = codemirror('code-sql-mirror', {
                    mode: 'sql',
                    readOnly: this.isDetails
                })

                this.keypress = () => {
                    if (!sqlEditor.getOption('readOnly')) {
                        sqlEditor.showHint({
                            completeSingle: false
                        })
                    }
                }

                // Monitor keyboard
                sqlEditor.on('keypress', this.keypress)

                sqlEditor.on('changes', () => {
                    // this._cacheParams()
                })

                sqlEditor.setValue(this.sql)

                return sqlEditor
            },
            _cacheParams () {
                this.$emit('on-cache-params', {
                    dsType: this.dsType,
                    dataSource: this.rtDatasource,
                    dtType: this.dtType,
                    dataTarget: this.rtDatatarget,
                    sql: editor ? editor.getValue() : '',
                    targetTable: this.targetTable,
                    jobSpeedByte: this.jobSpeedByte * 1024,
                    jobSpeedRecord: this.jobSpeedRecord,
                    preStatements: this.preStatements,
                    postStatements: this.postStatements,
                    xms: +this.xms,
                    xmx: +this.xmx
                })
            },
            _destroyEditor () {
                if (sqlEditor) {
                    sqlEditor.toTextArea() // Uninstall
                    sqlEditor.off($('.code-sql-mirror'), 'keypress', this.keypress)
                    sqlEditor.roff($('.code-sql-mirror'), 'changes', this.changes)
                }
            },
            _destroysqlEditor () {
                if (sqlEditor) {
                    sqlEditor.toTextArea() // Uninstall
                    sqlEditor.off($('.code-sql-mirror'), 'keypress', this.keypress)
                    sqlEditor.off($('.code-sql-mirror'), 'changes', this.changes)
                }
            }
        },
        created () {
            let o = this.backfillItem

            // Non-null objects represent backfill
            if (!_.isEmpty(o)) {
                // set jvm memory
                this.xms = o.params.xms || 1
                this.xmx = o.params.xmx || 1
                // backfill
                this.sql = o.params.sql || []
                this.localParams = o.params.localParams || ''
            }
        },
        mounted () {
            this._handlersqlEditor()
        },
        destroyed () {
            /**
             * Destroy the editor instance
             */
            if (sqlEditor) {
                sqlEditor.toTextArea() // Uninstall
                sqlEditor.off($('.code-sql-mirror'), 'keypress', this.keypress)
            }
        },
        watch: {
            // Watch the cacheParams
            cacheParams (val) {
                this._cacheParams()
            }
        },
        computed: {
            cacheParams () {
                return {
                    dsType: this.dsType,
                    dataSource: this.rtDatasource,
                    dtType: this.dtType,
                    dataTarget: this.rtDatatarget,
                    targetTable: this.targetTable,
                    jobSpeedByte: this.jobSpeedByte * 1024,
                    jobSpeedRecord: this.jobSpeedRecord,
                    preStatements: this.preStatements,
                    postStatements: this.postStatements
                }
            }
        },
        components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput, mScriptBox }
    }
</script>
